<template>
	<view style="flex-direction: column; display: flex;">
		<view style="flex-direction: row; flex-wrap: nowrap; justify-content: space-between; height: auto; width: 100%;">
			<text style="margin-left: 20rpx; margin-top: 20rpx; font-size: 50rpx; line-height: 1.5em;">{{hotelinfo.name}}</text>
		</view>
		<view style="flex-direction: row; margin-left: 20rpx;">
			<text style="color: #808080; font-size: 30rpx; line-height: 2.5em;">{{hotelinfo.address}}</text>
		</view>
		<view class="line" style="width: 100%; height: 1rpx; background-color: #f4f4f4;"></view>
		<view style="flex-wrap: wrap;flex-direction: column;height: auto;">
			<text style="color: #555555; margin-left: 20rpx;">介绍</text>
		</view>
		<view style="margin: 20rpx;">
			<text style="flex-wrap: wrap; font-size: 25rpx;">{{hotelinfo.desc}}</text>
		</view>
		<view style="margin-top: 30rpx; flex-direction: row; align-items: center;display: flex; height: 80rpx; width: 750rpx; justify-content: space-between;">
			<text style="margin-left: 30rpx; width: 70%;">{{choosedate.startDate}}入住--{{choosedate.endDate}}离店</text>
			<button plain="true" style="border-color: #FFFFFF; color: #4CD964; font-size: 30rpx; margin-right: 20rpx;" @click="clickChangeDate()">修改</button>
			<uni-calendar ref="calendar" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm" />
		</view>
		<view>
			<text style="margin-left: 30rpx; line-height: 2.0em; font-size: 35rpx;">房间列表</text>
		</view>
		<view v-for="data in hotelskus">
			<image :src="data.imageUrl" style="width: 100%; height: 350rpx;" mode="aspectFill"></image>
			<view style="flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: space-between; height: 200rpx; display: flex;">
				<view style="width: 50%; height: 200rpx; flex-direction: column; display: flex;">
					<text style="margin-left: 30rpx; line-height: 2.0em; margin-top: 30rpx;">{{data.title+'/'+data.maxNumber+"人"}}</text>
					<text style="margin-left: 30rpx;">{{data.price+"每晚"}}</text>
				</view>
				<view style="width: 50%; height: 200rpx;">
					<button style="width: 250rpx; height: 100rpx; margin-top: 50rpx; margin-right: 20rpx;"@click="clickReservation(data)">立即预定</button>
				</view>
			</view>
		</view>
		<view>
			<text style="margin-left: 30rpx; line-height: 2.0em;">酒店位置</text>
			<view>
				<map style="width: 750rpx; height: 300rpx; :latitude='latitude'; :longitude='longitude'; :markers:'covers'"></map>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import config from '../../common/config.js';

	export default {
		data() {
			return {
				hotelinfo:{},
				hotelskus:[{},{},{}],
				covers:[{
					latitude: "",
					longitude: "",
					iconPath: ""
				}],
				info: {
					lunar: true,
					range: true,
					insert: false,
				},
				choosedate: {
					startDate:"",
					endDate:""
				},
				userinfo:{},
				latitude: 39.909,
				longitude: 116.39742,
			}
		},
		methods: {
			hotelskurequest() {
				uni.request({
					url: config.hosts+'hotel/hotelskulist',
					method: 'POST',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						hotelid : this.hotelinfo.id
					},
					success: res => {
						this.hotelskus = res.data;
						console.log(res);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			reservationRequest(e) {
				uni.request({
					url: config.hosts+'hotel/reservation',
					method: 'POST',
					header:{
						'content-type': 'application/json'
					},
					data: {
						hotelid : this.hotelinfo.id,
						startDate: this.choosedate.startDate,
						endDate: this.choosedate.endDate,
						userid: this.userinfo.uid,
						hotelskuid: e.id
					},
					success: res => {					
						uni.showModal({
							content:"预约成功",
							showCancel:false
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			clickChangeDate() {
				this.$refs.calendar.open()
			},
			confirm(e) {
				this.choosedate.startDate = e.range.data[0];
				this.choosedate.endDate = e.range.data[e.range.data.length-1];
			},
			clickReservation(e) {
				this.reservationRequest(e);
			}
		},
		onLoad(e) {
			var data = JSON.parse(e.data);
			this.hotelinfo=data;
			this.hotelskurequest();
			uni.setNavigationBarTitle({
				title:this.hotelinfo.name
			})
			this.latitude = Number(this.hotelinfo.latitude);
			this.longitude = Number(this.hotelinfo.longitude);
			this.covers = [
				{
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					iconPath: "../../static/location.png"
				}
			]
			const nowDate = new Date();
			const nextDate = new Date(nowDate.getTime()+24*60*60*1000); //后一天
			this.choosedate.startDate = nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-'+nowDate.getDate();
			this.choosedate.endDate = nextDate.getFullYear()+'-'+(nextDate.getMonth()+1)+'-'+nextDate.getDate();
			
			try {
				const value = uni.getStorageSync('userinfo');
				if (value) {
					this.userinfo = JSON.parse(value);
				}
			} catch (e) {
				// error
			}
		}
	}
</script>

<style>

</style>
